<template>
	<view class="container">
		<view class="top-bg">
			<u-navbar 
			isBack 
			title="查看详情" 
			background="rgba(0,0,0,0)"
			back-icon-color="#fff"
			title-color="#fff"></u-navbar>
			<view class="title">
				<text class="pay">施工中</text>
			</view>
		</view>
		<view class="content">
			<view class="detail">
				<view class="detail-content">
					<view v-if="list.is_back==1" class="is_back">已回退</view>
					<view class="product df-bt">
						<view class="product-info df-ct">
							<image :src="list.headimg.path" mode="" class="product-img"></image>
							<view class="name">
								<view class="name-top">{{list.realname}}</view>
								<view class="phone">{{list.phone}}</view>
							</view>
						</view>
						<view class="iconfont icon-dadianhua" @click="toTelPhone"></view>						
					</view>
					<view class="top">
						<view class="size df-bt">
							<view class="">
								<view class="t">户型</view>
								<view>{{list.house_type}}</view>
							</view>
							<view class="">
								<view class="t">面积</view>
								<view>{{list.house_area}}m²</view>
							</view>
							<view class="right">
								<view class="t">小区</view>
								<view>{{list.estate}}</view>
							</view>
						</view>
						<view class="address">
							<view class="address-title t">
								装修地址
							</view>
							<view class="address-detail">
								{{list.address}}
							</view>
						</view>	
									
					</view>
					
				</view>				
			</view>
			<view class="personInCharge">
				<view class="title">
					施工负责人
				</view>
				<view class="personInfo">
					<view class="item">
						<view class="Img">
							<view v-if="!personCharge1.avatar.path" class="gL_add"></view>
							<image :src="personCharge1.avatar.path" mode=""></image>
						</view>
						{{personCharge1.name?personCharge1.name:'暂无管家'}}
						<span>管家</span>
					</view>
					<view class="border"></view>
					<view class="item">
						<view class="Img">
							<view v-if="!personCharge2.avatar.path" class="gL_add"></view>
							<image :src="personCharge2.avatar.path" mode=""></image>
						</view>
						{{personCharge2.name?personCharge2.name:'暂无工长'}}
						<span class="span2">工长</span>
					</view>
				</view>
			</view>	
			<view class="design-time">
				<view class="title">
					施工时间
				</view>
				<view class="u-calendar df-ct">
					<view class="left" @click="handleTime">
						{{startDate}} 至 {{endDate}}
					</view>
					<!-- <view class="right" @click="handleTime">
						
					</view> -->
				    <u-calendar 
					v-model="show" 
					:mode="mode" 
					z-index="99999" 
					@change="change"
					max-date="2100-01-01">
						<view slot="tooltip">
							<view class="title">
								请选择设计开始/结束时间
							</view>
						</view>
					</u-calendar>
				</view>
			</view>	
			<view class="contract">
				<view class="title">
					订单合同
				</view>
				<view class="upload">
					<view class="imgBox" v-for="(item,index) in contractImg" :key="index">
						<image :src="item.path" mode="" @click="toViewImg(index,1)"></image>
						<!-- <image :src="`${baseimg}/static/constr/remove.png`" @click="removeImg(index)" mode=""></image> -->
					</view>
					<!-- <view class="uploadBtn" @click="uploadFN(1)">+<span>图片/PDF</span></view> -->
				    <!-- <u-upload ref="" :on-change="handleChange" :auto-upload="false" upload-text="图片/PDF"></u-upload> -->
				</view>
			</view>	
			<view class="contract">
				<view class="title">
					施工图纸
				</view>
				<view class="upload">
					<view class="imgBox" v-for="(item,index) in constrImg" :key="index">
						<image :src="item.path" mode="" @click="toViewImg(index,2)"></image>
						<image :src="`${baseimg}/static/constr/remove.png`" @click="constrImgDel(index)" mode=""></image>
					</view>
					<view class="uploadBtn" @click="uploadFN(2)">+<span>添加图纸</span></view>
				    <!-- <u-upload upload-text="添加图纸" :file-list="buildImgList"></u-upload> -->
				</view>
			</view>
			<view class="contract">
				<view class="title">
					设计图纸
				</view>
				<view class="upload">
					<view class="imgBox" v-for="(item,index) in desginImg" :key="index">
						<image :src="item.path" mode="" @click="toViewImg(index,4)"></image>
						<image :src="`${baseimg}/static/constr/remove.png`" @click="desginImgDel(index)" mode=""></image>
					</view>
					<view class="uploadBtn" @click="uploadFN(4)">+<span>添加图纸</span></view>
				    <!-- <u-upload upload-text="添加图纸" :file-list="buildImgList"></u-upload> -->
				</view>
			</view>
			<view class="contract">
				<view class="title">
					选材单
				</view>
				<view class="upload">
					<view class="imgBox" v-for="(item,index) in materSingle" :key="index">
						<image :src="item.path" mode="" @click="toViewImg(index,3)"></image>
						<!-- <image :src="`${baseimg}/static/constr/remove.png`" @click="materSingleDel(index)" mode=""></image> -->
					</view>
					<!-- <view class="uploadBtn" @click="uploadFN(3)">+<span>添加图纸</span></view> -->
				    <!-- <u-upload upload-text="添加图纸" :file-list="buildImgList"></u-upload> -->
				</view>
			</view>
			<view class="message">
				<view class="title">
					订单信息
				</view>
				<view class="appeal">
					<text class="left">客户诉求</text>
					<text class="right-appeal">{{list.remark}}</text>
				</view>
				<view class="number df">
					<text class="left">订单编号</text>
					<text class="center">{{list.order_no}}</text>
					<text class="copy" @click="copyBtn">复制</text>
					
				</view>
				<view class="time df">
					<text class="left">下单时间</text>
					<text class="right">{{list.create_time | dateformat("YYYY-MM-DD HH:mm:ss")}}</text>
				</view>
			</view>
			<view class="message">
				<view class="title">
					支付信息
				</view>
				<view class="money df">
					<text class="left">合同金额</text>
					<text class="total-money">¥ {{list.contract_price}}</text>
				</view>
				<view class="appeal">
					<text class="left">支付次数</text>
					<text class="right-appeal">{{list.pay_progress.length}}</text>
				</view>
				<view class="time df">
					<text class="left">支付比例</text>
					<text class="right">{{list.pay_rule?list.pay_rule.replace(/,/g,'、'):''}}</text>
				</view>
				<!-- 支付比例 -->
				<view class="payNumList">
					<view class="item" v-for="(item,index) in list.pay_progress" :key="index">
						<view class="info">
							<view class="num">{{index+1}}</view>
							{{item.rate*100}}%
							<text>(￥{{item.amount}})</text>
						</view>
						<view v-if="item.checked || item.pay_status!=0" class="btn" @click="toCollect(item.id,item.pay_status)" :class="{'active':item.checked&&item.pay_status==0}">{{item.pay_status==0?'发起收款':item.pay_status==1?'待付款':'已付款'}}</view>
					</view>
				</view>
				<!-- 备注 -->
				<view class="remarksBox">
					<view class="title">
						备注
					</view>
					<view class="textarea">
						 <textarea disabled v-model="list.pay_rule_desc" maxlength="1000" placeholder-style="color:#D8D8D8" placeholder="备注信息~"/>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" v-if="!show">
			<view class="more">
				<view @click="openMore">更多</view>
				<view class="moreItem" v-if="dis" @click="toArchReta">
					档案留存
					<i class="iconfont">&#xe674;</i>
				</view>
			</view>
			<view class="btn">
				<button type="default" class="btn-text" @click="toBroad">施工播报</button>
				<!-- <button type="default" class="btn-text">远程监控</button> -->
				<button type="default" class="btn-text" @click="toProgress">施工进度</button>
			</view>
		</view>
	</view>
</template>

<script>
	import service_constr from '@/service/constr.js'
	import URL from '@/config/url.js'
	export default {
		data() {
			return {
				id:null,
				baseimg:this.$static,
				list:{},
				startDate:'2020-02-03',
				endDate:'2021-03-06',
				// footerShow:false,
				show:false,
				personCharge1:{}, //管家
				personCharge2:{}, //工长
				contractImg:[], //合同
				constrImg:[],  //施工图纸
				materSingle:[], //选材单
				desginImg:[], //设计图纸
				height:0,
				dis:false
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		methods:{
			// 获取详情
			getDetail(){
				service_constr.getDetail({id:this.id}).then(res=>{
					if(res.code==1){
						console.log(res)
						this.list = res.data?res.data:{};
						// 合同
						let isArr = Array.isArray(res.data.contract_thumb_url)
						if(isArr){
							this.contractImg = res.data.contract_thumb_url;
						}else{
							this.contractImg.push(res.data.contract_thumb_url)
							let noRepeat = [...new Set(this.contractImg.map(item=> JSON.stringify(item)))];
							this.contractImg = noRepeat.map(item=> JSON.parse(item))
							console.log(this.contractImg)
						}
						
						// 施工图纸
						let isArr2 = Array.isArray(res.data.draw_thumb_url)
						if(isArr2){
							this.constrImg = res.data.draw_thumb_url;
						}else{
							this.constrImg.push(res.data.draw_thumb_url)
							// 重复调用订单信息时去重
							let noRepeat = [...new Set(this.constrImg.map(item=> JSON.stringify(item)))];
							this.constrImg = noRepeat.map(item=> JSON.parse(item))
							console.log(this.constrImg)
						}
						
						// 选材单
						let isArr3 = Array.isArray(res.data.material_thumb_url)
						if(isArr3){
							this.materSingle = res.data.material_thumb_url;
						}else{
							this.materSingle.push(res.data.material_thumb_url)
							// 重复调用订单信息时去重
							let noRepeat = [...new Set(this.materSingle.map(item=> JSON.stringify(item)))];
							this.materSingle = noRepeat.map(item=> JSON.parse(item))
							console.log(this.materSingle)
						}
						
						// 设计图纸
						let isArr4 = Array.isArray(res.data.design_thumb_url)
						if(isArr4){
							this.desginImg = res.data.design_thumb_url;
						}else{
							this.desginImg.push(res.data.design_thumb_url)
							// 重复调用订单信息时去重
							let noRepeat = [...new Set(this.desginImg.map(item=> JSON.stringify(item)))];
							this.desginImg = noRepeat.map(item=> JSON.parse(item))
							console.log(this.desginImg)
						}
						
						// this.contractImg = res.data.contract_thumb_url?res.data.contract_thumb_url:[];
						// this.constrImg = res.data.draw_thumb_url?res.data.draw_thumb_url:[];
						this.startDate = this.$utils.getFormatDate(res.data.build_start_time*1000,'yyyy-MM-dd');
						this.endDate = this.$utils.getFormatDate(res.data.build_end_time*1000,'yyyy-MM-dd');
						res.data.director.map(item=>{
							if(item.position==1){
								this.personCharge1 = item
							}else{
								this.personCharge2 = item
							}
						})
						// this.personCharge1 = res.data.director[0]?res.data.director[0]:{};
						// this.personCharge2 = res.data.director[1]?res.data.director[1]:{};
						
						// 处理数据按顺序进行收款
						this.list.pay_progress.map((item,index)=>{
							item.checked = false
							if(this.list.pay_progress[0].pay_status==0){
								this.list.pay_progress[0].checked = true
							}else if(index!=0 && this.list.pay_progress[index-1].pay_status!=0 && this.list.pay_progress[index].pay_status==0){
								this.list.pay_progress[index].checked = true
							}
						})
					}
				})
			},
			
			// 上传图片
			uploadFN(num){
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_IMAGE,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									let obj = {
										path:data.data.url,
										id:data.data.id
									}
									if(num==1){ //1合同，2施工图纸
										this.contractImg.push(obj)
									}else if(num==2){
										this.constrImg.push(obj)
									}else if(num==4){
										this.desginImg.push(obj)
									}else{
										this.materSingle.push(obj)
									}
									this.toEdit()
									
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
								setTimeout(function(){
									uni.hideLoading()
								},500)
				            }
				        });
				    }
				});
			},
			
			// 移除施工图纸
			constrImgDel(index){
				this.constrImg.splice(index,1)
				this.toEdit()
			},
			
			// 移除施工图纸
			desginImgDel(index){
				this.desginImg.splice(index,1)
				this.toEdit()
			},
			
			// 图片预览
			toViewImg(index,type) { //type=1合同，type=2施工图纸，type=4设计图纸
				let imgArr = type==1?this.contractImg:type==2?this.constrImg:type==4?this.desginImg:this.materSingle;
				let urlType = Array.isArray(imgArr)
				console.log(imgArr,'需要预览的图片')
				let imgUrl = []
				if (urlType) {
					imgArr.map(item => {
						imgUrl.push(item.path)
					})
				} else {
					imgUrl.push(imgArr.path)
				}
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				});
			},
			
			// 更换图片时触发编辑
			toEdit(){
				// 施工图纸
				let imgArr = []
				this.constrImg.map(item=>{
					imgArr.push(item.id)
				})
				// 设计图纸
				let imgArr1 = []
				this.desginImg.map(item=>{
					imgArr1.push(item.id)
				})
				let params = {
					id:this.id,
					draw_thumb_url:imgArr.join(','),
					design_thumb_url:imgArr1.join(','),
					is_back:0
				}
				console.log(params,'更换图纸数据')
				service_constr.editOrder(params).then(res=>{
					console.log(res,'更换图纸')
					if(res.code==1){
						uni.showToast({
							title:'修改成功',
							icon:'success'
						})
						this.getDetail()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			// 添加管家
			toAddPerson(){
				uni.navigateTo({
					url:`/pages_decoration/home/buildOrder/staffList?position=1`
				})
			},
			
			// 添加工长
			toAddGc(){
				uni.navigateTo({
					url:`/pages_decoration/home/buildOrder/staffList?position=2`
				})
			},
			
			// 进入施工播报
			toBroad(){
				uni.navigateTo({
					url:`/pagesOne/constr/constrBroad/broadIndex?order_id=${this.id}`
				})
			},
			
			// 进入施工进度
			toProgress(){
				uni.navigateTo({
					url:'/pagesOne/constr/progress/progressList?order_id='+this.id
				})
			},
			
			// 复制按钮
			copyBtn(){
				uni.setClipboardData({
				    data: this.list.order_no,
				    success: function () {
						console.log('复制成功')
				    }
				});
			},
			
			// 发起收款按钮
			toCollect(id,status){
				if(status==0){
					service_constr.toCollection({id}).then(res=>{
						console.log(res,'发起收款')
						if(res.code==1){
							uni.showToast({
								title:'发起收款成功',
								icon:'success'
							})
							this.getDetail()
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}
			},
			
			change(e) {
				console.log(e,9999);
				this.startDate = e.startDate
				this.endDate = e.endDate
				// this.footerShow = false
				this.show = false
			},
			handleTime(){
				this.show = true
				// this.footerShow = true
			},
			
			openMore(){ //打开更多
				if(this.dis){
					this.dis = false
				}else{
					this.dis = true
				}
			},
			// 电话按钮
			toTelPhone(){
				console.log(this.list.phone,'电话电话')
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: this.list.phone, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			
			// 进入档案留存
			toArchReta(){
				uni.navigateTo({
					url:`/pagesOne/constr/archReta/archList?order_id=${this.id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../iconfont.css';
	.container{
		.top-bg{
			background:  url(https://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat top;
			width: 100%;
			height: 468rpx;
			position: relative;
			/deep/ .u-navbar .u-border-bottom{
						border: 0 !important;
			}
			.title{
				display: flex;
				margin: 80rpx 0 0 44rpx;				
				.pay{
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 36rpx;
					color: #FFFFFF;
				}
			}			
		}
		.content{
			position: absolute;
			left: 0;
			top: 350rpx;
			z-index: 99;
			padding: 24rpx 24rpx 200rpx 24rpx;
			width: 100%;
			.detail{
				// padding: 0 24rpx;
				
				.detail-content{
					position: relative;
					background-color: #fff;
					padding: 30rpx 24rpx;
					margin-bottom: 22rpx;
					border-radius: 16rpx;
					.is_back{
						position: absolute;
						top: 0;
						right: 0;
						width: 90rpx;
						height: 36rpx;
						background-color: #E7AD14;
						border-radius: 0 16rpx 0 16rpx;
						font: 400 22rpx/36rpx PingFang SC;
						text-align: center;
						color: #fff;
					}
					.top{
						padding: 28rpx;
						background: #F8F8F8;
						border-radius: 8rpx;
						color: #505050;
						margin-bottom: 30rpx;
						.size{
							margin-bottom: 40rpx;
							.right{
								display: flex;
								flex-direction: column;
								justify-content: flex-end;
								text-align: right;
								// align-items: right;
								}
						}
						.address{
							
							.address-detail{
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 40rpx;
								color: #505050;
							}
						}
							.t {
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 36rpx;
								color: #A0A0A0;
							}
							
						
					}
					.product {
						padding-bottom: 30rpx;
						// padding-top: 22rpx;
						.product-img {
							width: 84rpx;
							height: 84rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
						.name{
							.name-top{
								font-size: 26rpx;
								font-weight: 500;
								line-height: 40rpx;
								color: #0A0605;
							}
							.phone{
								font-size: 26rpx;
								font-weight: 400;
								line-height: 40rpx;
								color: #505050;
							}
						}
						.iconfont{font-size: 50rpx;}
						
					}
					
					.btn-box {
						&:after { display: block; clear: both; content: ''; visibility: hidden; height: 0; }
						.more {
							float: left;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							color: #A0A0A0;
							padding-top: 10rpx;
						}
						.price-box {
							text-align: right;
							padding: 40rpx 0 22rpx 0;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 20rpx;
							color: #878787;
							.d-price {
								color: #dfb368;
								font-size: 32rpx;
								padding-left: 20rpx;
							}
						}
						.btn {
							// width: 50%;
							// float: right;
							display: flex;
							justify-content:flex-end ;
							align-items: center;
							.btn-text {
								width: 172rpx;
								height: 64rpx;
								background: #FFFFFF;
								border: 2rpx solid #505050;
								opacity: 1;
								border-radius: 32rpx;
								text-align: center;
								line-height: 64rpx;
								color: #505050;
								font-size: 26rpx;
								margin: 0 10rpx;
							}
							.active{
								background-color: #DBA954;
								color: #fff;
								border: 0;
							}
						}
						
					}
				}
			}
			
			
			// 施工负责人
			.personInCharge{
			padding: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 30rpx;
			.title{
				font: 500 30rpx/40rpx PingFang SC;
				color: #0A0605;
				span{
					font: 400 22rpx/18rpx PingFang SC;
					color: #505050;
				}
			}
			.personInfo{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 48rpx 80rpx 0;
				font: 400 26rpx/40rpx PingFang SC;
				color: #0A0605;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					image{width: 114rpx;height: 114rpx;border-radius: 50%;margin-bottom: 16rpx;}
					span{
						margin-top: 4rpx;
						width: 60rpx;
						height: 30rpx;
						padding: 0rpx 12rpx;
						font: 400 18rpx/30rpx PingFang SC;
						color: #fff;
						border-radius: 18rpx;
						background-color: #636B90;
					}
					.Img{
						text-align: center;
						line-height: 114rpx;
						width: 114rpx;height: 114rpx;border-radius: 50%; background-color: #F8F8F8;
						.gL_add{width: 100%;height: 100%;color: #A0A0A0;font-size: 40rpx;}
					}
					.span2{color: #505050;background-color: #FFCE0D;}
				}
				.border{
					width: 0;
					height: 120rpx;
					border: 1rpx solid #D8D8D8;
				}
			}
			}
			.design-time{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.u-calendar{
					margin-top: 40rpx;
					// z-index: 99999;
					.title{
						text-align: center;
						padding: 20rpx 0 0 0;
					}
					.left{
						background: #F8F8F8;
						padding: 24rpx 36rpx;
					}
					.right{
						background: #F8F8F8;
						padding: 24rpx 36rpx;
					}
				}
			}
			.contract{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.upload{
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.imgBox{
						margin: 0 5rpx 10rpx;
						position: relative;
						width: 200rpx;
						height: 200rpx;
						border-radius: 4rpx;
						image:nth-child(1){
							width: 100%;
							height: 100%;
							border-radius: 4rpx;
						}
						image:nth-child(2){
							width: 50rpx;
							height: 50rpx;
							position: absolute;
							top: 5rpx;
							right: 5rpx;
						}
					}
					.uploadBtn{
						margin: 0 5rpx 10rpx;
						background-color: #F8F8F8;
						border-radius: 4rpx;
						width: 200rpx;
						height: 200rpx;
						font-size: 60rpx;
						display:  flex;
						align-items: center;
						color: #A0A0A0;
						flex-direction: column;
						justify-content: center;
						span{font: 400 22rpx/36rpx PingFang SC;}
					}
				}
			}
			.design{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.upload{
					margin-top: 40rpx;
				}
			}
			.message{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
					margin-bottom: 20rpx;
				}
				.left{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #A0A0A0;
					display: inline-block;
					// margin-right: 10rpx;
					width: 27%;
				}
				.right{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #505050;
				}
				.copy{
					padding: 6rpx 18rpx;
					background-color: rgba(219, 169, 84, 0.1);
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 20rpx;
					color: #DBA954;
					border-radius: 18rpx;
					margin-left: 10rpx;
				}
				.total-money{
					color: #DBA954;
				}
				.right-appeal{
					width: 73%;
					// margin-left: 62rpx;
				}
				.df{
					margin: 20rpx 0;
				}
				// 支付比例列表
				.payNumList{
					.item{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 30rpx 0;
						.info{
							display: flex;
							align-items: center;
							.num{
								width: 30rpx;
								height: 30rpx;
								border: 2rpx solid #A0A0A0;
								border-radius: 50%;
								text-align: center;
								font-size: 22rpx;
								line-height: 30rpx;
								margin-right: 20rpx;
							}
							text{
								color: #DCAB58;
								margin-left: 20rpx;
							}
						}
						.btn{
							color: #DCAB58;
						}
						.active{
							padding: 8rpx 30rpx;
							border-radius: 28rpx;
							color: #fff;
							background: linear-gradient(90deg, #DBA954 0%, #EABA6A 100%);
						}
					}
				}
				// 备注
				.remarksBox{
					// padding: 24rpx;
					background-color: #fff;
					border-radius: 16rpx;
					margin-top: 30rpx;
					.title{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #0A0605;
					}
					.textarea{
						background: #F8F8F8;
						padding: 24rpx;
						height: 160rpx;
						overflow-y: auto;
						margin-top: 20rpx;
					}
				}
			}
		}
		.footer{
			height: 150rpx;
			width: 100%;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
			padding: 30rpx;
			display: flex;
			justify-content:flex-end ;
			align-items: center;
			justify-content: space-between;
			.btn{display: flex;align-items: center;}
			.btn-text {
				width: 172rpx;
				height: 64rpx;
				background: #FFFFFF;
				border: 2rpx solid #505050;
				opacity: 1;
				border-radius: 32rpx;
				text-align: center;
				line-height: 64rpx;
				color: #505050;
				font-size: 26rpx;
				margin-left:10rpx;
			}
			.active{
				background-color: #DBA954;
				color: #fff;
				border: 0;
				width: 240rpx;
			}
			.more{
				position: relative;
				.moreItem{
					position: absolute;
					top: -92rpx;
					left: -4rpx;
					z-index: 100;
					border-radius: 8rpx;
					width: 144rpx;
					height: 80rpx;
					text-align: center;
					background-color: rgba(10,6,5,0.6);
					color: #fff;
					font: 400 26rpx/80rpx PingFang SC;
					i{
						height: 16rpx;
						color: rgba(10,6,5,0.6);
						position: absolute;
						font-size: 20rpx;
						left: 8rpx;
						bottom: 21rpx;
					}
				}
			}
		}
	}
</style>


